<template>
  <div class='container'>
    <el-card style="margin: 15px;">
      <el-row :gutter="20">
        <!-- 目录名称 -->
        <el-form ref="form" :model="form" label-width="80px">
           <el-col :span="8">
            <div class="grid-content bg-purple">
           <el-form-item label="目录名称" prop="directoryName">
           <el-input @keyup.native.enter="getlist" v-model.trim="form.directoryName" style="width: 200px;"></el-input>
           </el-form-item>
           </div>
  </el-col>
  <!-- 状态Tab -->
  <el-col :span="8">
    <div class="grid-content bg-purple-light" style="position: relative;top: 0px;left: -300px;">
      <el-form-item label="状态" prop="state">
        <el-select v-model="form.state" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
  <!-- 清除按钮 -->
  <el-button style="margin-left: 10px;" @click="clearBtn">清除</el-button>
  <!-- 搜索按钮 -->
  <el-button type="primary" @click="getlist">搜索</el-button>
           </el-form-item>
    </div>
  </el-col>
  <el-col :span="8">
    <div class="grid-content bg-purple" >
      <!-- 新增目录按钮 -->
      <el-button @click="handleMuluBtn" type="success"  style="position: relative;top: 0px;left: 500px;">
        <i class="el-icon-edit"></i>
        新增目录</el-button>
  </div>
  </el-col>
       </el-form>
</el-row>
<!-- 数据总共条数 -->
<el-row>
  <el-col :span="24" style="background-color: #f4f4f5;"><div class="grid-content bg-purple-dark">
    <el-alert
    type="info"
    show-icon>
    <div style="font-size: 16px;">数据一共{{list.counts}}条</div>
  </el-alert>
  </div>
</el-col>
</el-row>
<!-- tab表格 -->
<el-table
      :data="arr"
      style="width: 100%">
      <el-table-column
        type="index"
        label="序号"
        width="80" />

      <el-table-column
        prop="subjectName"
        label="所属学科"
        width="280">
      </el-table-column>

      <el-table-column
        prop="directoryName"
        label="目录名称">
      </el-table-column>

      <el-table-column
        prop="username"
        label="创建者">
      </el-table-column>

      <el-table-column
        prop="addDate"
        label="创建日期">
      </el-table-column>

      <el-table-column
        align="center"
        prop="totals"
        label="面试题数量">
      </el-table-column>

      <el-table-column
        prop="state"
        label="状态">
        <template slot-scope="scope">
          <div>{{ handleStatus(scope.row.state)}}</div>
        </template>
      </el-table-column>
      <!-- 操作 按钮 区域 -->
      <el-table-column
        label="操作">

              <template slot-scope="{row}">
                <el-button ref="Enabled"  type="text" @click="forbiddenBtn(row)">{{row.state===1? '禁用': '启用'}}</el-button>
            <el-button type="text" :disabled="row.state===1" @click="changeBtn(row)">修改</el-button>
            <el-button type="text" :disabled="row.state===1" @click="deleteBtn(row)">删除</el-button>
              </template>

      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <el-row type="flex" style="margin-top: 15px;" justify="end">
      <el-pagination
  background
  layout="prev, pager, next,sizes,jumper"
  :page-sizes="[5, 10, 20, 50]"
  :current-page.sync="form.page"
  :page-size.sync="form.pagesize"
  @current-change="getlist"
  @size-change="getlist"
  :total="list.counts">
</el-pagination>
    </el-row>
    </el-card>
    <!-- 新增目录Dialog -->
    <directorysAdd  :dialog-visible.sync="dialogVisible"></directorysAdd>
    <!-- 修改 -->
    <directorysAddTwo ref="directorysAddTwo" :dialog-visible2.sync="dialogVisible2"></directorysAddTwo>
    <!-- 删除 -->
    <!-- <directorysDelete ></directorysDelete> -->
  </div>
</template>

<script>
import { list, changeState, remove } from '@/api/hmmm/directorys'
import directorysAdd from '../components/directorys-add.vue'
import directorysAddTwo from '../components/directorys-add-Two.vue'
export default {
  components: { directorysAdd, directorysAddTwo },
  name: 'directorys',
  data () {
    return {
      form: {
        page: 1,
        pagesize: 10
        // state: '',
        // directoryName: ''
      },
      options: [{
        value: '1',
        label: '启用'
      }, {
        value: '0',
        label: '禁用'
      }],
      list: [],
      arr: [],
      dialogVisible: false,
      dialogVisible2: false,
      deleteId: ''

    }
  },

  created () {
    this.getlist()
  },
  methods: {
    // 渲染页面
    async getlist () {
      const { data } = await list(this.form)
      // console.log(data)
      this.list = data // 结构给数据一共多少条
      this.arr = data.items // 渲染列表数据

      // console.log(this.$refs.Enabled.name)
    },
    // 状态 state 拿到数据 进行判断
    handleStatus (code) {
      let str = ''
      switch (code) {
        case 0:
          str = '已禁用'
          break
        case 1:
          str = '已启用'
          break
      }
      return str
    },
    // 新增目录按钮
    handleMuluBtn () {
      this.dialogVisible = true
    },
    clearBtn () {
      this.form.directoryName = ''
      this.form.state = ''
    },
    // 启用 / 禁用 按钮
    async forbiddenBtn (row) {
      if (row.state === 1) {
        // 禁用按钮传值
        await changeState({ id: row.id, state: 0 })
      }
      if (row.state === 0) {
        // 启用按钮传值
        await changeState({ id: row.id, state: 1 })
      }
      this.getlist()
      this.$message.success('修改成功')
      // console.log(this.$refs.Enabled)
    },
    // 修改按钮
    async changeBtn (row) {
      this.dialogVisible2 = true
      // 回显数据给 子组件：directorysAddTwo
      console.log(row)
      this.$refs.directorysAddTwo.ruleForm.directoryName = row.directoryName
      this.$refs.directorysAddTwo.ruleForm.subjectID = row.subjectID
      this.$refs.directorysAddTwo.ruleForm.id = row.id
    },
    //  删除按钮
    async deleteBtn (row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        console.log(row.id)
        await remove({ id: row.id })
        //  删除成功 重新渲染页面
        this.getlist()
        this.$message({
          type: 'success',
          message: '删除成功!'

        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }

  }
}
</script>

<style scoped lang='less'>
::v-deep.el-table_1_column_8 {
  background-color: pink;
}
</style>
